<template>
  <div id="three"></div>
</template>

<script>
// stats.js和dat.gui gio
import * as THREE from 'three';
export default {
  mounted() {
    this.init();
  },
  created() {
    console.log(this)
  },
  data() {
    return {
      runTime: '',
      canvasHeight: '',
      canvasWidth: '',
      scene: '',
      renderer: '',
      camera: '',
      box: ''  // 定義各種共用的數據
    }
  },
  methods: {
    init() {
      this.canvasHeight = document.getElementById("three").offsetHeight;  // 將 canvas 高度設定成 #three 的高度
      this.canvasWidth = document.getElementById("three").offsetWidth;   // 將 canvas 高度設定成 #three 的高度
      // window.addEventListener('resize', this.windowResize.bind(this), false); // 監視視窗大小變化
      this.createScene()
      this.createRenderer()
      this.createObject()
      this.animate()
    },
    createScene() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    },
    createRenderer() {
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(this.canvasWidth, this.canvasHeight); // 設定渲染器大小跟 canvas 一樣
      this.renderer.setPixelRatio(window.devicePixelRatio);       // 設定渲染器比例跟螢幕一樣
      document.getElementById("three").appendChild(this.renderer.domElement);
    },
    createObject() {
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      this.scene.add(cube);
      this.camera.position.z = 5;
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    }
  }
}
</script>

<style lang="less" scoped>
#three {
  width: 100%;
  height: 100%;
  background: #ffffff;
}
</style>